<!--Start Breadcrumb-->

<div class="row">
    <div id="breadcrumb" class="col-xs-12">

    </div>
</div>
<!--End Breadcrumb-->
<!--Start Dashboard 2-->

<div class="row-fluid">


    <div id="dashboard_tabs" class="col-xs-12 col-sm-10">
        <form id="usuario"  data-target="flujo/ModificarUsuario" action="" class="form">
            <!--Start datos Tab 1-->
            <div id="dashboard-overview" class="row" style="visibility: visible; position: relative;">
                <div class="box">
                    <div class="box-content">
                        <div class="text-left">
                            <h4 class="page-header">Usuario</h4>
                        </div>
                        <div class="row ">
                            <div class="col-sm-6">
                                <label class="col-xs-4 control-label form-group" for="int_cedula">C&eacute;dula</label>
                                <!--                                <div class="col-xs-2 form-group">
                                                                    <select class="select" id="tip_per" name="tip_per">
                                                                        <option value="">...</option>
                                                                        <option value="1">V</option>
                                                                        <option value="0">E</option>
                                                                    </select>
                                                                </div>-->
                                <div class="col-xs-4 form-group">
                                    <input type="text" class="form-control" id="int_cedula" onkeypress="return validarNum(event)" name="int_cedula" placeholder="Ejem: 12563987" data-toggle="tooltip" title="Cédula de identidad" maxlength="8">
                                </div>
                                <div class="col-xs-2 form-group">
                                    <button id="buscar" type="button">
                                        <img src="../includes/img/lupa.png"  height="25" width="25"> 
                                    </button>  
                                </div>

                            </div>
                        </div>
                    </div>
                    <div id="datopersonales" >
                        <div class="row" >
                            <div class="col-sm-6 form-group" >
                                <input type="hidden" id="clvusuario" name="clvusuario" />
                                <label class="col-xs-4 control-label" for="strnombre">Nombres</label>
                                <div class="col-xs-8">
                                    <input type="text" class="form-control" id="strnombres" name="strnombre" placeholder="Ejemplo: jose " data-toggle="tooltip" title="Primer Nombre"/>
                                </div>
                            </div>
                            <div class="col-sm-6 form-group">
                                <label class="col-xs-4 control-label" for="strapellido" >Apellidos</label>
                                <div class="col-xs-8">
                                    <input type="text" class="form-control" id="strapellidos" name="strapellido" placeholder="Ejemplo: lopez " data-toggle="tooltip" title="Primer Apellido"/>
                                </div>
                            </div>
                        </div>

                        <div class="row ">
                            <div class="col-sm-6 form-group">
                                <label class="col-xs-4 control-label" for="strcorreo" >Correo</label>
                                <div class="col-xs-8">
                                    <input type="text" class="form-control" id="strcorreo" name="strcorreo" placeholder="Ejemplo: insopesca@insopesca.com" data-toggle="tooltip" title="Correo" />
                                </div>
                            </div>
                            <div class="col-sm-6 form-group">
                                <label class="col-xs-4 control-label" for="str_tlf" >Tel&eacute;fono</label>
                                 <div class="col-xs-3">
                                 <select class="form-control" id="tipo_telefono" name="tipo_telefono">
                                        <option value="">...</option>
                                        <option value="0424">0424</option>
                                        <option value="0414">0414</option>
                                        <option value="0426">0426</option>
                                        <option value="0416">0416</option>
                                        <option value="0412">0412</option>
                                    </select>
                                </div>
                                <div class="col-xs-5">
                                    <input type="text" class="form-control" id="str_tlf" onkeypress="return validarNum(event)" name="str_tlf" placeholder="Ejemplo: 1234567" data-toggle="tooltip" title="N° de Teléfono" maxlength="7" />
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6 form-group">
                                <label class="col-xs-4 control-label">Estado</label>
                                <div class="col-xs-8">
                                    <select id="estado" name="ch_estado">
                                        <option value="" selected="true">...</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-6 form-group">
                                <label class="col-xs-4 control-label">Municipio</label>
                                <div class="col-xs-8">
                                    <select id="municipio" name="ch_municipio">
                                        <option value="" selected="true">...</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6 form-group">
                                <label class="col-xs-4 control-label">Parroquia</label>
                                <div class="col-xs-8">
                                    <select id="parroquia" name="ch_parroquia">
                                        <option value="" selected="true">...</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-6 form-group">
                                <label class="col-xs-4 control-label">Area</label>
                                <div class="col-xs-8">
                                    <select id="area" name="ch_area">
                                        <option value="" selected="true">...</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6 form-group" >
                                <label class="col-xs-4 control-label" for="strlogin">Login</label>
                                <div class="col-xs-8">
                                    <input type="text" disabled="true" class="form-control" id="strlogin" name="strlogin" placeholder="Ejemplo: pperez " data-toggle="tooltip" title="Login"/>
                                </div>
                            </div>
                            <div class="col-sm-6 form-group">
                                <label class="col-xs-4 control-label">Rol</label>
                                <div class="col-xs-8">
                                    <select id="rol" name="ch_rol">
                                        <option value="" selected="true">...</option>
                                    </select>
                                </div>
                            </div>

                        </div>
                        <div class="row">
                            <div class="col-sm-8 pull-right">
                                <div class="col-xs-4 text-right pull-right">
                                    <button class="btn btn-danger btn-label-right" id="borrar" type="button">
                                        Eliminar
                                        <span>
                                            <i class="fa fa-arrow-circle-o-right"></i>
                                        </span>
                                    </button>
                                </div>
                                <div class="col-xs-2 pull-right">
                                    <button class="btn btn-primary btn-label-right" id="modificar" type="button">
                                        Actualizar
                                        <span>
                                            <i class="fa fa-arrow-circle-o-right"></i>
                                        </span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div> <!--End datos Visible-->    
                    </div>
                </div>
                <!--End datos Tab 1-->


            </div>
        </form>

        <div class="clearfix"></div>
    </div>
</div>
    <!--End Dashboard 2 -->

    <script type="text/javascript">
        function validarNum(e) { // 1
            tecla = (document.all) ? e.keyCode : e.which; // 2
            if (tecla === 8)
                return true; // 3
            patron = /^\d*$/; // 4
            te = String.fromCharCode(tecla); // 5
            return patron.test(te); // 6
        }
        // Run Select2 on element
        function Select2Test() {
            $("#parroquia,#municipio,#estado_civil,#estado,#rol,#area").select2();
        }
        $(document).ready(function() {
            $("#datopersonales").css("display", "none");
            // Load script of Select2 and run this
            LoadSelect2Script(Select2Test);
            $('.form-control').tooltip();

            //lista area
            $.ajax({
                type: "post",
                url: "../get/ubicacion",
                data: {tip: '5'},
                success: function(data) {
                    $("#area").append(data);
                }
            });
            //lista rol
            $.ajax({
                type: "post",
                url: "../get/ubicacion",
                data: {tip: '4'},
                success: function(data) {
                    $("#rol").append(data);
                }
            });
            //listar estados
            $.ajax({
                type: "post",
                url: "../get/ubicacion",
                data: {tip: '1'},
                success: function(data) {
                    $("#estado").append(data);
                }
            });
            /* funcion para crear la lista de municipios */
            $("#estado").change(function(event) {
                var id_es = $(this).find(':selected').val();
                $.ajax({
                    type: "post",
                    url: "../get/ubicacion",
                    data: {tip: '2', id: id_es},
                    success: function(data) {
                        $("#municipio").html('<option value="" selected="true">...</option>');
                        $("#municipio").append(data);
                    }
                });
            });
            /* funcion para crear la lista de Parroquia */
            $("#estado").change(function(event) {
                var id_mu = $(this).find(':selected').val();
                $.ajax({
                    type: "post",
                    url: "../get/ubicacion",
                    data: {tip: '3', id: id_mu},
                    success: function(data) {
                        $("#parroquia").html('<option value="" selected="true">...</option>');
                        $("#parroquia").append(data);
                    }
                });
            });
            $("#municipio").change(function(event) {
                var id_mu = $(this).find(':selected').val();
                $.ajax({
                    type: "post",
                    url: "../get/ubicacion",
                    data: {tip: '3', id: id_mu},
                    success: function(data) {
                        $("#parroquia").html('<option value="" selected="true">...</option>');
                        $("#parroquia").append(data);
                    }
                });
            });

            // Load script of Select2 and run this
            DashboardTabChecker();
            WinMove();
        });
        $("#modificar").click(function() {
       if(!(($('#strapellidos').val()=='')||($('#strnombres').val()=='')||$("#strcorreo").val()==''||$("#strlogin").val()=='')){
            $.ajax({
                type: "post",
                url: '../flujo/ModificarUsuario',
                dataType: "json",
                cache: false,
                data: $("#usuario").serialize(),
                success: function(data) {
                    if (data['success']) {
                        jSuccess(data['mensaje'], {
                            VerticalPosition: 'center',
                            HorizontalPosition: 'center'
                        });
                    } else {
                        jError('ERROR : ' + data['mensaje'], {
                            VerticalPosition: 'center',
                            HorizontalPosition: 'center'
                        });
                    }
                }
            });
        }else{
            jError('ERROR : No pueden Existir Campos Vacio', {
                            VerticalPosition: 'center',
                            HorizontalPosition: 'center'
                        });
            }
        });

        $("#borrar").click(function() {
            if( window.confirm("¿Seguro/a de que desea Eliminar al Usuario?") ){ 
            var clvusuarios = $("#clvusuario").val();
            $.ajax({
                type: "post",
                url: '../flujo/EliminarUsuario',
                dataType: "json",
                cache: false,
                data: {clvusuario: clvusuarios},
                success: function(data) {
                    if (data['success']) {
                        jSuccess(data['mensaje'], {
                            VerticalPosition: 'center',
                            HorizontalPosition: 'center'
                        });

                        var url = 'modificar_usuario';
                        window.location.hash = url;

                        LoadAjaxContent('feria/' + url);
                    } else {
                        jError('ERROR : ' + data['mensaje'], {
                            VerticalPosition: 'center',
                            HorizontalPosition: 'center'
                        });
                    }
                }
            });
            }
        });



        $("#buscar").click(function() {
           
            if(!($('#int_cedula').val()=='')){
            
            $.ajax({
                type: "post",
                url: "../get/buscar",
                dataType: "json",
                cache: false,
                data: {id: $("#int_cedula").val()},
                success: function(data) {
                    if (data['success']) {
                        $.each(data['dato'], function(key, value) {
                            $("#clvusuario").val(value['clvusuario']);
                            $("#strnombres").val(value['strnombres']);
                            $("#strapellidos").val(value['strapellidos']);
                            $("#strcorreo").val(value['strcorreo']);
                            $("#estado").select2("val", value['clvestado']);
                            $("#area").select2("val", value['clvarea']);
                            $("#rol").select2("val", value['clvrol']);
                            $("#tip_per").select2("val", value['blnvenezolano']);
                            //alert(value['clvrol']+value['clvrol']);
                            if ($("#estado").val()) {
                                var id_es = $("#estado").val();
                                $.ajax({
                                    type: "post",
                                    url: "../get/ubicacion",
                                    data: {tip: '2', id: id_es},
                                    success: function(data) {
                                        $("#municipio").html('<option value="" selected="true">...</option>');
                                        $("#municipio").append(data);
                                        $("#municipio").select2("val", value['clvmunicipio']);
                                    }
                                });
                            }
                            $.ajax({
                                type: "post",
                                url: "../get/ubicacion",
                                data: {tip: '3', id: value['clvmunicipio']},
                                success: function(data) {
                                    $("#parroquia").html('<option value="" selected="true">...</option>');
                                    $("#parroquia").append(data);
                                    $("#parroquia").select2("val", value['clvparroquia']);
                                    
                                }
                            });
                            $("#str_tlf").val(value['stntelefono']);
                            $("#tipo_telefono").val(value['tipo_telefono']);
                            $("#strlogin").val(value['strlogin']);

                            $("#datopersonales").css("display", "block");
                        });
                    } else {
                        jError('ERROR : ' + data['mensaje'], {
                            VerticalPosition: 'center',
                            HorizontalPosition: 'center'
                        });
                    }

                }
            });}else{
            jError('ERROR : Agrege una Cedula', {
                            VerticalPosition: 'center',
                            HorizontalPosition: 'center'
                        });
            }
        });
        $("#estado").change(function(event) {

            $.ajax({
                type: "post",
                url: "../get/ubicacion",
                data: {tip: '2', id: value['clvestado']},
                success: function(data) {
                    $("#municipio").html('<option value="" selected="true">...</option>');
                    $("#municipio").append(data);
                }
            });
            //$("#municipio").select2("val", value['municipio']);
        });

    </script>
